<template>
    <div>
        <Child :arr="data"> </Child>
        <ul> 
            <li v-for="item,index in data" :key="index">年龄：{{ item.age }} 姓名：{{item.name}}</li>
        </ul>

        <button @click="hanck">改变第一项的名字为邱福</button>
    </div>
</template>

<script lang='ts' setup>
import { ref,reactive, toRefs } from "vue"
import Child from "./全选反选案例.vue";

let data = ref([{name:'yyc',age:18},{name:'qqc',age:19},{name:'hjgsfc',age:17},{name:'hel',age:18}])
// let data = reactive([{name:'yyc',age:18},{name:'qqc',age:19},{name:'hjgsfc',age:17},{name:'hel',age:18}])

/*
 这里使用reactive  来定义数据  和 使用 ref来定义数据其实都是响应式的，唯一不同的区别就是  我们使用ref定义的数据
 的时候单独使用时需要使用 data.value来进行赋值的，但是我们使用 reactive来定义响应式的数据的时候，我们只需要使用
 data来进行赋值就可以啦  ，因为使用reactive定义出来的响应式数据就是ref定义出的响应式数据value的那一层，所以如果
 某一天当你出现恍惚，不知道使用哪个来定义响应式数据的时候，那就直接使用ref来定义。但是要注意一点，我们的reactive
 是必须要使用的场景就是  使用解构赋值的时候，一定需要用  要配合  ToRefs(reactive(复杂数据类型))  来使用
*/





// let data1 = reactive([1,2,3,4])
// console.log(data);
const hanck = ()=>{
    data.value[0].name = "邱福"
}

console.log(globalBian,globalObj);

fn()
</script>
 
<style lang = "less" scoped>
    
</style>